<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1 {
	width: 500px;
	height: 600px;
	border: 2px solid blue;
	margin: 200px auto;
	position: relative;
	background-color: skyblue;
}

p {
	text-align: center;
}

#btn1 {
	position: absolute;
	left: 170px;
	top: 500px;
}

#btn2 {
	position: absolute;
	left: 250px;
	top: 500px;
}

img {
	position: absolute;
	height: 400px;
	width: 350px;
	margin: 5px auto;
	left: 75px;
	top:70px;
}
</style>
</head>
<body>
	<div id="div1">
		<p id="p">一共有六张图片,当前为第一张</p>
		<img id="tu" alt="123" src="image1/19.jpg">
		<button id="btn1">前一张</button>
		<button id="btn2">后一张</button>
	</div>
	<script type="text/javascript">
		var btn1 = document.getElementById('btn1');
		var btn2 = document.getElementById('btn2');
		var tu = document.getElementById('tu');
		var p = document.getElementById('p');
		var arr = [ 'image3/5.jpg', 'image3/6.jpg', 'image3/7.jpg' ];
		var i = 0;

		btn1.onclick = function() {
			tu.src = arr[i];
			i--;
			if (i < 0) {
				i = 2;
			}
			var index = i + 1;
			p.innerHTML = '一共有六张图片,当前为第' + index + '张';
		}
		btn2.onclick = function() {
			tu.src = arr[i];
			i++;
			if (i > 2) {
				i = 0;
			}
			var index = i + 1;
			p.innerHTML = '一共有六张图片,当前为第' + index + '张';
		}
	</script>
</body>

</html>